<template>
    <div class="box">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" :height="100">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <van-grid :column-num="5" :border="false">
            <van-grid-item clickable to="/bookCity/city_reach">
                <img class="grid-img" src="../../img/grid-img1.png">
                <span class="grid">签到</span>
            </van-grid-item>
            <van-grid-item clickable to="/bookCity/city_rank">
                <img class="grid-img" src="../../img/grid-img2.png">
                <span class="grid">排行</span>
            </van-grid-item>
            <van-grid-item clickable to="/bookCity/city_hot">
                <img class="grid-img" src="../../img/grid-img3.png">
                <span class="grid">人气</span>
            </van-grid-item>
            <van-grid-item clickable to="/">
                <img class="grid-img" src="../../img/grid-img4.png">
                <span class="grid">免费</span>
            </van-grid-item>
            <van-grid-item clickable to="/bookcity/city_vip">
                <img class="grid-img" src="../../img/grid-img5.png">
                <span class="grid">会员</span>
            </van-grid-item>
        </van-grid>
        <div class="null"></div>


        <div class="goodbooks">
            <div class="rubbish"></div>
            <h4>好书推荐</h4>
        </div>
        <div class="books">
            <book-item v-for="item in books" :key="item.id" :books="item"></book-item>
        </div> 
        <div class="null"></div>


        <div class="goodbooks">
            <div class="rubbish"></div>
            <h4>女生最爱</h4>
            <van-icon class="icon-flush" name="replay" />
            <span class="flush">换一批</span>
        </div>
        <div class="books2">
            <book-item v-for="item in books2" :key="item.id" :books="item"></book-item>
        </div>


        <div class="null"></div>
        <div class="goodbooks">
            <div class="rubbish"></div>
            <h4>男生最爱</h4>
            <van-icon class="icon-flush" name="replay" />
            <span class="flush" @click="flushed">换一批</span>
        </div>
        <div class="books2">
            <book-item v-for="item in books3" :key="item.id" :books="item"></book-item>
        </div>


        <div class="null"></div>
        <div class="goodbooks">
            <div class="rubbish"></div>
            <h4>免费好书</h4>
            <van-icon class="icon-flush" name="replay" />
            <span class="flush">换一批</span>
        </div>
        <div class="books2">
            <book-item v-for="item in books2" :key="item.id" :books="item"></book-item>
        </div>
    </div>
</template>

<script>
import headNav from '../bookCity/ui/headNav.vue';
import bookItem from '@/components/bookItem';
import { getBooksApi } from '@/api/booksApi';
    export default {
        data() {
            return {
                num1:0,
                num2:6,
                books: [],
                books2: [],
                books3: []
            }
        },
        components:{
            headNav,
            bookItem
        },
        async created() {
            let books =await getBooksApi()
            this.books = books.slice(0,3)
            this.books2 = books.slice(4,10)
            this.books3 = books.slice(4,10)
        },
        methods:{
            async flushed() {
                let books = await getBooksApi()
                if(this.num1>4 && this.num2>10){
                    this.num1 = 0 , this.num2 = 6;
                }else{
                    this.books3 = books.slice(this.num1++,this.num2++)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.box{
    padding-bottom: 50px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background-color: #39a9ed;
    border-radius:10px;
}
.grid-img{
    margin-top: 10px;
    width: 38px;
    height: 38px;
    z-index: 0;
}
.grid{
    font-size: 14px;
    margin: 5px;
    color:#666
}
.grid-icon{
    width: 17px;
    height: 18px;
}
.null{
    width: 100%;
    height: 12px;
    background-color: #f2f2f2;
}
.goodbooks{
   width: 100%;
   height: 54px;
}
.goodbooks>h4{
    font-size: 16px;
    font-weight: 400;
    line-height: 54px;
    float: left;
}
.rubbish{
    width: 3px;
    height: 16px;
    background-color: #2bb283;
    float: left;
    margin-top: 19px;
    margin-left: 12px;
    margin-right: 5px;
}
.flush{
    width: 42px;
    height: 18px;
    float: right;
    font-size: 14px;
    margin-top: 15px;
    margin-right: 5px;
}
.icon-flush{
    width: 16px;
    height: 16px;
    float: right;
    margin-top: 17px;
    margin-right: 20px;
}
.books{
    width: 100%;
    height: 220px;
}
.books2{
    width: 100%;
    height: 400px;
}
</style>